<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
	<meta http-equiv="expires" content="0">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>聊天室</title>
	<!-- 重置样式 -->
	<link rel="stylesheet" href="../css/reset.css">
	<!-- icon -->
	<link rel="stylesheet" href="../css/fonts.css">
	<link rel="stylesheet" href="../css/animate.css">
	<link rel="stylesheet" href="../js/jquery-weui/weui.min.css">
	<link rel="stylesheet" href="../js/jquery-weui/jquery-weui.css">
	<link rel="stylesheet" href="../css/main.css">
</head>

<body>
	<div id="fullPage">
		<canvas id="canvas"></canvas>
	</div>
	<div class="chat-model">
		<div class="phone-header">
			<div class="back-wrapper">
				<i class="iconfont icon-back"></i>
				<span class="bridge">2</span>
			</div>
			<div class="name">湘A-8U8EA专属服务群</div>
			<i class="iconfont icon-checkmore" id="more"></i>
		</div>
		<div class="chat-wrapper" id="chatWrapper">
			<div class="online-num-detail">
				<div class="online-num-text">当前在线人数<span class="num">7</span>人</div>
				<div class="online-members">
					<span class="online-name">服务顾问</span>
					<span class="online-name">组合服务顾问</span>
					<span class="online-name">销售顾问</span>
					<span class="online-name">保险顾问</span>
					<span class="online-name">续保专员</span>
					<span class="online-name">维修技师</span>
					<span class="online-name">客服专员</span>
				</div>
			</div>
			<div id="chat-content">
				<!-- @标识框 -->
				<div class="atTipWrapper" style="display: none;">
					<span class="text">有人@我</span>
				</div>
				<!-- @标识框 -->
				<p class="date">星期四 下午 04:20</p>
				<div class="left-chat">
					<img class="avatar" src="../img/avatar.png">
					<div class="chat-content-wrapper">
						<p class="username">湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主</p>
						<div class="chat-position-wrapper">
							<div class="content-box">您好张先生，我们是您的专属团队，以后您有任何问题都可以在群里找我们。</div>
							<span class="done-read">1人已读</span>
						</div>
					</div>
				</div>
				<div class="left-chat">
					<img class="avatar" src="../img/avatar.png">
					<div class="chat-content-wrapper">
						<p class="username">湘A8U8EA车主</p>
						<div class="chat-position-wrapper">
							<img src="../img/img01.jpeg" alt="发动机">
							<span class="unread">未读</span>
						</div>
					</div>
				</div>
				<div class="left-chat">
					<img class="avatar" src="../img/avatar.png">
					<div class="chat-content-wrapper">
						<p class="username">湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主</p>
						<div class="chat-position-wrapper">
							<div class="content-box">您好张先生，我们是您的专属团队，以后您有任何问题都可以在群里找我们。</div>
							<span class="done-read">1人已读</span>
						</div>
					</div>
				</div>
				<div class="left-chat">
					<img class="avatar" src="../img/avatar.png">
					<div class="chat-content-wrapper">
						<p class="username">湘A8U8EA车主</p>
						<div class="chat-position-wrapper">
							<img class="chat-img" src="../img/img01.jpeg" alt="发动机">
							<span class="unread">未读</span>
						</div>
					</div>
				</div>
				<div class="left-chat">
					<img class="avatar" src="../img/avatar.png">
					<div class="chat-content-wrapper">
						<p class="username">湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主湘A8U8EA车主</p>
						<div class="chat-position-wrapper">
							<div class="content-box">您好张先生，我们是您的专属团队，以后您有任何问题都可以在群里找我们。</div>
							<span class="done-read">1人已读</span>
						</div>
					</div>
				</div>
				<div class="right-chat">
					<div class="chat-position-wrapper">
						<span class="unread">未读</span>
						<div class="content-box">好的，谢谢你们</div>
					</div>
					<img class="avatar" src="../img/avatar.png">
				</div>
				<div class="right-chat">
					<div class="chat-position-wrapper">
						<span class="done-read">1人已读</span>
						<img class="chat-img" src="../img/img01.jpeg" alt="发动机">
					</div>
					<img class="avatar" src="../img/avatar.png">
				</div>
			</div>
		</div>

		<!-- 群聊成员 -->
		<div id="member-wrapper" class="animated fadeIn member-wrapper" style="display: none;">
			<div class="members" id="members_">
				<div class="title">
					<span>群聊成员</span>
					<span class="total-num">共<span class="num">7</span>人</span>
				</div>
				<div class="content">
					<div class="item">
						<img class="icon-wrapper" src="../img/avatar.png">
						<div class="role-name" data-id="0">服务顾问</div>
					</div>
					<div class="item">
						<img class="icon-wrapper" src="../img/avatar.png">
						<div class="role-name" data-id="1">组合服务顾问</div>
					</div>
					<div class="item">
						<img class="icon-wrapper" src="../img/avatar.png">
						<div class="role-name" data-id="2">保险顾问</div>
					</div>
					<div class="item">
						<img class="icon-wrapper" src="../img/avatar.png">
						<div class="role-name" data-id="3">续保专员</div>
					</div>
					<div class="item">
						<img class="icon-wrapper" src="../img/avatar.png">
						<div class="role-name" data-id="4">销售顾问</div>
					</div>
				</div>
			</div>
			<div class="find-chat-content">
				<span class="text">查找聊天内容</span>
				<i class="iconfont icon-next"></i>
			</div>
			<div class="hidden-wrapper"></div>
		</div>
		<!-- 群聊成员 -->

		<div class="phone-footer">
			<div class="upload-image-warpper">
				<i class="iconfont icon-faimlyalbum"></i>
				<input class="upload-image-input" type="file">
			</div>
			<!-- <div class="message-modal">
					
				</div> -->
			<textarea id="write-input" class="write-input" rows="5"></textarea>
			<span class="send-btn">发送</span>
		</div>
	</div>
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/previewImage.js"></script>
	<script>
		$(".back-wrapper").click(function () {
			window.location.href = "../index.html";
		});

		// 预览图片
		var wxScale = new WxScale({
			fullPage: document.querySelector("#fullPage"),
			canvas: document.querySelector("#canvas")
		});
		$(".chat-img").each(function () {
			$(this).click(function () {
				wxScale.start(this);   //这里的this指向需要放大的这张图片
			});
		});

		$("#more").click(function () {
			if ($('#member-wrapper').is(':hidden')) { //如果当前隐藏
				$('#member-wrapper').show(); //那么就显示div
				console.log($("#member-wrapper").height(), $("#members_").innerHeight(), $(".find-chat-content").innerHeight());
				let hiddenHeight = ($("#member-wrapper").height() - ($("#members_").innerHeight()) - ($(".find-chat-content").innerHeight()) -
					10);
				$(".hidden-wrapper").css("height", hiddenHeight + "px");
			} else { //否则
				$('#member-wrapper').hide(); //就隐藏div
			}
		});
		$(".item").click(function () {
			let name = $(this).children(".role-name").text();
		})
		$(".hidden-wrapper").click(function () {
			$('#member-wrapper').hide();
		})
		$(".find-chat-content").click(function () {
			window.location.href = "chatContent.html";
		});

		// 默认打开页面时滚动条置底
		let chatContentHeight = $('#chat-content').innerHeight();
		let onlineNumDetailHeight = $('.online-num-detail').innerHeight();
		setTimeout(function () {
			$('.chat-wrapper').scrollTop(chatContentHeight + onlineNumDetailHeight);
			console.log(chatContentHeight, onlineNumDetailHeight);
		}, 100);

		// 判断滚动条是否在置顶 若在置顶时 再网上滑动则加载更多聊天消息
		$(".chat-wrapper").scroll(function () {
			let msgText = '<div class="right-chat"><div class="chat-position-wrapper"><span class="unread">未读</span><div class="content-box">你好你好</div></div><img class="avatar" src="../img/avatar.png"></div>';
			if ($(".chat-wrapper").scrollTop() <= 0) {
				$("#chat-content").find(".atTipWrapper").after(msgText);
				console.log("滚动条已经到达顶部");
			}
		});


		// 获取当前聊天输入框内的文本
		var oldTextareaValue = "";
		$("#write-input").bind("input propertychange", function () {
			oldTextareaValue = $("#write-input").val();
		})

		// 点击@群聊成员 往聊天框文本中加入@成员名称
		$("#member-wrapper .item").click(function () {
			let rolename = $(this).find(".role-name").text();
			let newTextareaValue = oldTextareaValue + '@' + rolename; // 点击成员的名称
			let roleId = $(this).find(".role-name").attr('data-id'); // 点击成员的ID
			console.log(newTextareaValue, roleId);
			$('#member-wrapper').hide(); // 隐藏选择成员框
			// 在聊天框内增加@成员的聊天内容
			let msgText = '<div class="right-chat"><div class="chat-position-wrapper"><span class="unread">未读</span><div class="content-box">' + newTextareaValue + '</div></div><img class="avatar" src="../img/avatar.png"></div>';
			$("#chat-content").append(msgText);
			// 使滚动条置底
			let chatContentHeight = $('#chat-content').innerHeight();
			let onlineNumDetailHeight = $('.online-num-detail').innerHeight();
			$('.chat-wrapper').scrollTop(chatContentHeight + onlineNumDetailHeight);
		});

		// 判断是否有@我的消息
		// 通过ajax请求到是否有@的消息 这里默认有
		var atState = true;
		if (atState) {
			$(".atTipWrapper").show(); // 有@消息显示
		} else {
			$(".atTipWrapper").hide(); // 无@消息隐藏
		};

		// 点击有人@我 滚动条滚到消息那一行
		$(".atTipWrapper").click(function () {
			$(".atTipWrapper").hide(); // 无@消息隐藏
			$('.chat-wrapper').animate({ //获取滚动条的位置
				scrollTop: 0
			}, 300);
		});

	</script>
</body>

</html>